<template>
    <van-nav-bar
  title="排行榜"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>

    <van-tabs v-model:active="active" scrollspy sticky>
        <van-tab title="推荐">
            <div class="tittle">榜单推荐</div>
            <div class="typebox">
                <div class="imgbox" v-for="(item,index) in recommend" :key="index">
                    <img :src="item.img" class="img_list" @click="gosheetdetail(item.id)">
                </div>
            </div>
         </van-tab>
        <van-tab title="官方">
            <div class="tittle">官方榜</div>
            <div v-for='(item,index) in officialranking' class="card" @click="gosheetdetail(item.id)" :key="index">
                <div class="card_name">{{ item.name }}</div>
                <div class="card_bottom">
                    <img :src="item.img" class="img_gf">
                    <div>
                        <div v-for="(ele, index) in item.songarr" class="line" :key="index">
                            <span class="line_number">{{ index+ 1 }}</span>
                            <span>{{ ele.name }}</span>
                            -<span class="line_ar">{{ ele.ar }}</span>
                        </div>
                    </div>

                </div>

            </div>
        </van-tab>
        <van-tab title="曲风">
            <div class="tittle">曲风榜</div>
            <div class="typebox">
                <div class="imgbox" v-for="(item,index) in songstyle" :key="index"> 
                    <img :src="item.img" class="img_list" @click="gosheetdetail(item.id)">
                </div>
            </div>
         </van-tab>
         <van-tab title="全球">
            <div class="tittle">全球榜</div>
            <div class="typebox">
                <div class="imgbox" v-for="item,index in global" :key="index">
                    <img :src="item.img" class="img_list" @click="gosheetdetail(item.id)">
                </div>
            </div>
         </van-tab>
        <van-tab title="语种">
            <div class="tittle">语种榜</div>
            <div class="typebox">
                <div class="imgbox" v-for="(item,index) in languages" :key="index">
                    <img :src="item.img" class="img_list" @click="gosheetdetail(item.id)">
                </div>
            </div>
         </van-tab>
    </van-tabs>
    <!-- <button @click="ches">11</button> -->
</template>

<script setup>
import { rankingcontent } from '../../api/ranking'
import { sheetdetail, songdetail } from '../../api/music_style'
import { ref, onMounted } from 'vue'
import { useRouter} from 'vue-router';
import {languages,songstyle,officialranking,global,recommend } from '../../config/rankinglist'
const router = useRouter()
const onClickLeft = () => history.back();

onMounted(() => {
    getoffical()
    getlanguages()
})
const ches = async () => {
    let data = await rankingcontent()
    data.list.forEach((item, index) => {
        console.log(item.name, item.id)
    })

}
const getoffical = () => {
    
    officialranking.value.forEach(async (item) => {
        let data = await sheetdetail(item.id)
        data.privileges.length = 3
        data.privileges.forEach(async (ele, index) => {
            item.songarr=[]
            let data = await songdetail(ele.id)
            if (index == 0) {
                item.img = data.songs[0].al.picUrl
            }
            let song = { name: data.songs[0].name, ar: data.songs[0].ar[0].name }
            item.songarr.push(song)
        })
    })
}
const getlanguages = () => {
    recommend.value.forEach(async (item) => {
        let data = await sheetdetail(item.id)
        item.img = data.playlist.coverImgUrl
    })
    languages.value.forEach(async (item) => {
        let data = await sheetdetail(item.id)
        item.img = data.playlist.coverImgUrl
    })
    songstyle.value.forEach(async (item) => {
        let data = await sheetdetail(item.id)
        item.img = data.playlist.coverImgUrl
    })
    global.value.forEach(async (item) => {
        let data = await sheetdetail(item.id)
        item.img = data.playlist.coverImgUrl
    })
}
const gosheetdetail = (id)=>{
    router.push({
        path: '/sheetdetail',
        query:{
            ids:id
        }
    })
}

</script>

<style scoped lang="less">
.img_gf {
    width: 80px;
    height: 80px;
    margin: 0 20px;
    border-radius: 10px;

}

.img_list {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

.card {
    border-radius: 10px;
    border: 1px solid #e4e7ed;
    background-color: white;
    margin: 20px 0;
    width: 80%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    .card_name {
        font-weight: bold;
        font-size: 20px;
        margin: 10px 20px;
    }
}

.card_bottom {
    display: flex;
}

.line {
    margin: 2px;
    font-size: 13px;
    height: 25px;
    overflow-y: hidden;

    .line_number {
        margin: 0px 5px;
        font-weight: bold;
        color: #565C69;
    }

    .line_ar {
        margin: 0 5px;
        color: #BEC2C4;
    }

}

.tittle {
    font-weight: bold;
    font-size: 20px;
    margin-top:50px;
    margin-left:20px ;
}

.imgbox {
    width: 33.3%;
    margin: 20px 0;
    text-align: center;
    // display: flex;
    // flex-grow: 1;
    // justify-content: center;
    // flex-wrap: wrap;

}

.typebox {
    display: flex;
    flex-wrap: wrap;
}
</style>